<template>
  <div class="sencode">
    <el-button style="width:125px;padding:10px 8px;" @click="getVerifyCode()" :disabled="sent">{{sendText}}</el-button>
  </div>
</template>

<script>
  import indexApi from 'api'
  export default {
    props: [ //  接受参数，账号，类型
      'username',
      'type'
    ],
    computed: {},
    data () {
      return {
        upTime: 60,
        sent: false,
        sendText: '获取验证码'
      }
    },
    methods: {
      getVerifyCode () {
        if (this.username) {
          indexApi.sendValidateCode({account: this.username, type: this.type}).then((res) => {
            // console.log(res)
            this.$emit('disabled')
            this.sent = true
            this.sendText = '重新发送' + '(' + this.upTime + ')'
            const upTimeInter = setInterval(() => {
              this.upTime--
              this.sendText = '重新发送' + '(' + this.upTime + ')'
              if (this.upTime === 0) {
                clearInterval(upTimeInter)
                this.sendText = '获取验证码'
                this.upTime = 60
                this.sent = false
                this.$emit('enabled')
              }
            }, 1000)
          }).catch((res) => {
            return false
          })
        } else {
          let errMsg = ''
          if (this.$route.path.includes('/organize')) {
            errMsg = '请输入手机号'
          } else {
            errMsg = '请输入手机号/邮箱'
          }
          this.$message({
            showClose: true,
            message: errMsg,
            type: 'error'
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  @import '~styles/var.scss';
</style>
